<!--_meta 作为公共模版分离出去-->
<!DOCTYPE HTML >
<html lang="en"  xmlns:th="http://www.thymeleaf.org"
      xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-siteapp"/>
    <link rel="Bookmark" href="favicon.ico">
    <link rel="Shortcut Icon" href="favicon.ico"/>
    <!--[if lt IE 9]-->
    <script type="text/javascript" th:src="@{/assets/js/html5.js}"></script>
    <script type="text/javascript" th:src="@{/lib/respond.min.js}"></script>
    <!--[endif]-->
    <link rel="stylesheet" type="text/css" th:href="@{/static/h-ui/css/H-ui.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/static/h-ui.admin/css/H-ui.admin.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/lib/Hui-iconfont/1.0.8/iconfont.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/static/h-ui.admin/skin/default/skin.css}" id="skin"/>
    <link rel="stylesheet" type="text/css" th:href="@{static/h-ui.admin/css/style.css}"/>
    <!--[if IE 6]-->
    <script type="text/javascript" th:src="@{/assets/js/DD_belatedPNG_0.0.8a-min.js}"></script>
    <script>DD_belatedPNG.fix('*');</script>
    <!--[endif]-->
    <!--/meta 作为公共模版分离出去-->

    <title>品牌管理</title>
</head>
<body>
<!--_header 作为公共模版分离出去-->
<header class="navbar-wrapper">
    <div class="navbar navbar-fixed-top">
        <div class="container-fluid cl"><a class="logo navbar-logo f-l mr-10 hidden-xs" href="/index">H-ui.admin</a> <a
                class="logo navbar-logo-m f-l mr-10 visible-xs" href="/index">H-ui</a> <span
                class="logo navbar-slogan f-l mr-10 hidden-xs">v3.0</span> <a aria-hidden="false"
                                                                              class="nav-toggle Hui-iconfont visible-xs"
                                                                              href="javascript:;">&#xe667;</a>
            <nav class="nav navbar-nav">
                <ul class="cl">
                    <li class="dropDown dropDown_hover"><a href="javascript:;" class="dropDown_A"><i
                            class="Hui-iconfont">&#xe600;</i> 新增 <i class="Hui-iconfont">&#xe6d5;</i></a>
                        <ul class="dropDown-menu menu radius box-shadow">
                            <li><a href="javascript:;" onclick="article_add('添加资讯','article-add.html')"><i
                                    class="Hui-iconfont">&#xe616;</i> 资讯</a></li>
                            <li><a href="javascript:;" onclick="picture_add('添加资讯','picture-add.html')"><i
                                    class="Hui-iconfont">&#xe613;</i> 图片</a></li>
                            <li><a href="javascript:;" onclick="product_add('添加资讯','product-add.html')"><i
                                    class="Hui-iconfont">&#xe620;</i> 产品</a></li>
                            <li><a href="javascript:;" onclick="member_add('添加用户','member-add.html','','510')"><i
                                    class="Hui-iconfont">&#xe60d;</i> 用户</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
            <nav id="Hui-userbar" class="nav navbar-nav navbar-userbar hidden-xs">
                <ul class="cl">
                    <li th:each="role : ${currectRole}" th:text="${role.roleName}" class="cueeectrole">超级管理员</li>
                    <li class="dropDown dropDown_hover"><a href="#" class="dropDown_A">admin <i class="Hui-iconfont">&#xe6d5;</i></a>
                        <ul class="dropDown-menu menu radius box-shadow">
                            <li><a href="javascript:;" onClick="myselfinfo()">个人信息</a></li>
                            <li><a href="#">切换账户</a></li>
                            <li><a th:href="@{/doLogout}">退出</a></li>
                        </ul>
                    </li>
                    <li id="Hui-msg"><a href="#" title="消息"><span class="badge badge-danger">1</span><i
                            class="Hui-iconfont" style="font-size:18px">&#xe68a;</i></a></li>
                    <li id="Hui-skin" class="dropDown right dropDown_hover"><a href="javascript:;" class="dropDown_A"
                                                                               title="换肤"><i class="Hui-iconfont"
                                                                                             style="font-size:18px">&#xe62a;</i></a>
                        <ul class="dropDown-menu menu radius box-shadow">
                            <li><a href="javascript:;" data-val="default" title="默认（黑色）">默认（黑色）</a></li>
                            <li><a href="javascript:;" data-val="blue" title="蓝色">蓝色</a></li>
                            <li><a href="javascript:;" data-val="green" title="绿色">绿色</a></li>
                            <li><a href="javascript:;" data-val="red" title="红色">红色</a></li>
                            <li><a href="javascript:;" data-val="yellow" title="黄色">黄色</a></li>
                            <li><a href="javascript:;" data-val="orange" title="橙色">橙色</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </div>
    </div>
</header>
<!--/_header 作为公共模版分离出去-->

<!--_menu 作为公共模版分离出去-->
<aside class="Hui-aside">

    <div class="menu_dropdown bk_2">
        <dl id="menu-article">
            <dt><i class="Hui-iconfont">&#xe695;</i> 用户信息管理<i class="Hui-iconfont menu_dropdown-arrow">&#xe685;</i></dt>
            <dd>
                <ul>
                    <li><a href="User" title="用户列表">用户列表</a></li>
                    <li><a href="selectLits" title="步数明细">步数明细</a></li>
                    <li><a href="virtual_currency" title="货币兑换记录">货币兑换记录</a></li>
                </ul>
            </dd>
        </dl>
        <dl id="menu-picture">
            <dt><i class="Hui-iconfont">&#xe613;</i> 商品管理信息<i class="Hui-iconfont menu_dropdown-arrow">&#xe685;</i></dt>
            <dd>
                <ul>
                    <li><a href="commodity_shelves" title="图片管理">商品上架</a></li>
                    <li><a href="commodity_frame" title="图片管理">商品下架</a></li>
                    <li><a href="product_category" title="图片管理">商品分类</a></li>
                </ul>
            </dd>
        </dl>

        <dl id="menu-comments">
            <dt><i class="Hui-iconfont">&#xe622;</i>活动模块<i class="Hui-iconfont menu_dropdown-arrow">&#xe685;</i></dt>
            <dd>
                <ul>
                    <li><a href="#" title="转盘设置">转盘设置</a></li>
                    <li><a href="LotteryRecord_list" title="抽奖记录">抽奖记录</a></li>
                </ul>
            </dd>
        </dl>
        <dl id="menu-admin">
            <dt><i class="Hui-iconfont">&#xe62d;</i> 管理员设置<i class="Hui-iconfont menu_dropdown-arrow">&#xe685;</i></dt>
            <dd>
                <ul>
                    <li><a href="#" th:href="@{/listRole}" title="功能显示">角色管理</a></li>
                    <li><a href="admin_permission" title="具体负责模块">权限管理</a></li>
                    <li><a href="SysUser_list" title="管理员列表">管理员列表</a></li>
                </ul>
            </dd>
        </dl>

    </div>
</aside>
<div class="dislpayArrow hidden-xs"><a class="pngfix" href="javascript:void(0);" onClick="displaynavbar(this)"></a>
</div>
<!--/_menu 作为公共模版分离出去-->
<section class="Hui-article-box">
    <nav class="breadcrumb"><i class="Hui-iconfont">&#xe67f;</i> 首页 <span class="c-gray en">&gt;</span> 商品管理信息 <span
            class="c-gray en">&gt;</span> 商品下架 <a class="btn btn-success radius r"
                                                  style="line-height:1.6em;margin-top:3px"
                                                  href="javascript:location.replace(location.href);" title="刷新"><i
            class="Hui-iconfont">&#xe68f;</i></a></nav>
    <div class="Hui-article">
        <article class="cl pd-20">
            <div class="cl pd-5 bg-1 bk-gray mt-20"><span class="l">
                <a href="javascript:;" onclick="datadel()" class="btn btn-danger radius"><i
                        class="Hui-iconfont">&#xe6e2;</i> 批量删除</a></span> <span class="r">共有数据：<strong
                    th:text="${count}"></strong> 条</span></div>
            <div class="mt-10">
                <table class="table table-border table-bordered table-bg table-sort">
                    <thead>
                    <tr class="text-c">
                        <th width="25"><input type="checkbox" name="" value=""/></th>
                        <th width="120">商品名称</th>
                        <th with="50">兑换价格</th>
                        <th with="50">商品剩余</th>
                        <th width="500">商品详情</th>
                        <th width="120">创建时间</th>
                        <th width="100">操作</th>
                        <td style="display: none">id</td>
                        <td style="display: none">商品图片</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr class="text-c" th:each="product,index:${list}">
                        <td><input name="id" type="checkbox" value=""/></td>
                        <td th:text="${product.productName}"></td>
                        <td th:text="${product.productPrice}"></td>
                        <td th:text="${product.productSurolus}"></td>
                        <td th:text="${product.productDetails}"></td>
                        <td th:text="${#dates.format(product.productCreateTime, 'yyyy-MM-dd HH:mm:ss')}"></td>
                        <td class="f-14 product-brand-manage">
                            <a style="text-decoration:none" class="update_product" title="编辑"><i class="Hui-iconfont">&#xe6df;</i></a>
                            <a style="text-decoration:none" class="ml-5" onClick="active_del(this,'10001')"
                               href="javascript:;" title="删除">
                                <i class="Hui-iconfont">&#xe6e2;</i>
                            </a>
                        </td>
                        <td style="display: none" th:text="${product.id}"></td>
                        <td style="display: none" th:text="${product.productPicture}"></td>
                    </tr>
                    </tbody>
                </table>
            </div>
        </article>
    </div>
    <div class="page-container" style="display: none">
        <form enctype="multipart/form-data" th:action="@{/updateProduct}" th:object="${productInfo}" method="post"
              class="form form-horizontal" id="form-article-add">
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2"><span class="c-red"></span>商品名称：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" class="input-text" id="productName" name="productName"/>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">兑换价格：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" name="productPrice" id="productPrice" class="input-text" style="width:90%"/>
                    活力币
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">商品详情：</label>
                <div class="formControls col-xs-8 col-sm-9">
                <textarea name="productDetails" cols="" rows="" id="productDetails" class="textarea" datatype="*10-100"
                          dragonfly="true"></textarea>
                    <p class="textarea-numberbar"><em class="textarea-length">10</em>/200</p>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">商品剩余：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" name="productSurolus" id="productSurolus" class="input-text" style="width:90%"/>件
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">商品状态：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <select  name="status" style="width: 8%">
                        <option  value="0">0: 禁用</option>
                        <option  value="1" selected="selected">1：可用</option>
                    </select>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">商品分区：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <select name="productRegion" style="width: 10%">
                        <option value="0">0：新人专区</option>
                        <option value="1">1：邀请专区</option>
                        <option value="2">2：签到专区</option>
                        <option value="3" selected="selected">3：推荐专区</option>
                    </select>
                </div>
            </div>
            <div class="row cl">
                <label class="form-label col-xs-4 col-sm-2">图片上传：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input style="width: 20%" type="file" id="block-one" class="block" name="files" accept="image/*" value=""/>
                    <span><img style="width: 100px;height: 100px;" class="preview" src=""></span>
                    <input style="width: 20%" type="file" id="block-two" class="block" name="files" accept="image/*" value=""/>
                    <span><img style="width: 100px;height: 100px;" class="preview" src=""></span>
                    <input style="width: 20%" type="file" id="block-three" class="block" name="files" accept="image/*" value=""/>
                    <span><img style="width: 100px;height: 100px;"class="preview" src=""></span>
                    <input type="text" id="none" class="none" name="productPicture" value="" style="display: none"/>
                </div>
            </div>
            <div class="row cl"><input class="btn btn-secondary radius" value="修改" type="submit"
                                       onclick="return valid()" style="margin-left: 145px"/></div>
            <div class="row cl" style="display: none">
                <label class="form-label col-xs-4 col-sm-2">创建时间：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" name="productCreateTime" id="productCreateTime" class="input-text"
                           style="width:90%"/>
                </div>
            </div>
            <div class="row cl" style="display: none">
                <label class="form-label col-xs-4 col-sm-2">商品图片：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" name="productPicture" id="productPicture" class="input-text"
                           style="width:90%"/>
                </div>
            </div>
            <div class="row cl" style="display: none">
                <label class="form-label col-xs-4 col-sm-2">id：</label>
                <div class="formControls col-xs-8 col-sm-9">
                    <input type="text" name="id" id="id" class="input-text" style="width:90%"/>
                </div>
            </div>
        </form>
    </div>
</section>

<!--_footer 作为公共模版分离出去-->
<script type="text/javascript" th:src="@{/lib/jquery/1.9.1/jquery.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/layer/2.4/layer.js}"></script>
<script type="text/javascript" th:src="@{/static/h-ui/js/H-ui.js}"></script>
<script type="text/javascript" th:src="@{/static/h-ui.admin/js/H-ui.admin.page.js}"></script>
<script type="text/javascript" th:src="@{/lib/My97DatePicker/4.8/WdatePicker.js}"></script>
<script type="text/javascript" th:src="@{/lib/datatables/1.10.0/jquery.dataTables.min.js}"></script>
<script type="text/javascript" th:src="@{/lib/laypage/1.2/laypage.js}"></script>
<script>
    $(function () {
        $("#block-one").change(function () {
            var $file = $(this);
            var fileObj = $file[0];
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            if (fileObj && fileObj.files && fileObj.files[0]) {
                dataURL = windowURL.createObjectURL(fileObj.files[0]);
                $("img").eq(0).attr("src",dataURL);
            } else {
                dataURL = $file.val();
                var imgObj = document.getElementsByClassName("preview")[0];
                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
            }
        });
        $("#block-two").change(function () {
            var $file = $(this);
            var fileObj = $file[0];
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            if (fileObj && fileObj.files && fileObj.files[0]) {
                dataURL = windowURL.createObjectURL(fileObj.files[0]);
                $("img").eq(1).attr("src",dataURL);
            } else {
                dataURL = $file.val();
                var imgObj = document.getElementsByClassName("preview")[0];
                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
            }
        });
        $("#block-three").change(function () {
            var $file = $(this);
            var fileObj = $file[0];
            var windowURL = window.URL || window.webkitURL;
            var dataURL;
            if (fileObj && fileObj.files && fileObj.files[0]) {
                dataURL = windowURL.createObjectURL(fileObj.files[0]);
                $("img").eq(2).attr("src",dataURL);
            } else {
                dataURL = $file.val();
                var imgObj = document.getElementsByClassName("preview")[0];
                imgObj.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=scale)";
                imgObj.filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = dataURL;
            }
        });
        $("#none").val($("#block-one").val() + "," + $("#block-two").val() + "," + $("#block-three").val())
    })

    function active_del(obj) {
        var productName = $(obj).parent().prev().prev().prev().prev().prev().text();
        layer.confirm('确认要删除吗？', function () {
            $.ajax({
                url: "deleteProduct",
                type: "post",
                dataType: "json",
                data: {"productName": productName},
                success: function (data) {

                }
            });
            $(obj).parents("tr").remove();
            layer.msg('已删除!', {icon: 1, time: 1000});
        });
    }

    function datadel() {
        var chks = [];
        //获取被选中的节点
        $('input[name="id"]:checked').each(function () {
            chks.push($(this).parent().next().text());
        });
        $.ajax({
            type: 'POST',
            url: '/deleteProducts',
            dataType: 'json',
            data: {
                'ids': chks
            },
            success: function () {
                window.location.href = window.location.href;
            }
        });
    }

    $(function () {
        $(".update_product").click(function () {
            $(".Hui-article").css("display", "none");
            $(".page-container").css("display", "block");
            var productName = $(this).parent().prev().prev().prev().prev().prev().text();
            var productPrice = $(this).parent().prev().prev().prev().prev().text();
            var productSurolus = $(this).parent().prev().prev().prev().text();
            var productDetails = $(this).parent().prev().prev().text();
            var createTime = $(this).parent().prev().text();
            var id = $(this).parent().next().text();
            var productPicture = $(this).parent().next().next().text();
            $("#productName").val(productName);
            $("#productPrice").val(productPrice);
            $("#productDetails").text(productDetails);
            $("#productSurolus").val(productSurolus);
            $("#productCreateTime").val(new Date(Date.parse(createTime)));
            $("#id").val(id);
        })
    })
    $(function () {
        $(".block").blur(function () {
            $(".none").val($(".block").eq(0).val() + "," + $(".block").eq(1).val() + "," + $(".block").eq(2).val())

        })
    })
    /*$(function () {
        $("#productName").blur(function () {
            if ($("#productName").val().trim().length < 1) {
                layer.msg('商品名称不允许为空!', {icon: 1, time: 1000});
            }
        });
        $("#productPrice").blur(function () {
            var regExp = new RegExp("[0-9]");
            if ($("#productPrice").val().trim().length < 1) {
                layer.msg('兑换价格不允许为空!', {icon: 1, time: 1000});
            } else if (!$("#productPrice").val().match(regExp)) {
                layer.msg('兑换价格只能为数字!', {icon: 1, time: 1000});
            } else if (parseInt($("#productPrice").val()) < 0 || $("#productPrice").val().length > 12) {
                layer.msg('兑换价格不允许为负数且数字长度小于12!', {icon: 1, time: 1000});
            }
        });
        $("#productDetails").blur(function () {
            if ($("#productDetails").val().length < 10 || $("#productDetails").val().length > 200) {
                layer.msg('请输入至少10个字,并且不多于200字!', {icon: 1, time: 1000});
            }
        });
        $("#productSurolus").blur(function () {
            var regExp = new RegExp("[0-9]");
            if ($("#productSurolus").val().trim().length < 1) {
                layer.msg('商品剩余不允许为空!', {icon: 1, time: 1000});
            } else if (!$("#productSurolus").val().match(regExp)) {
                layer.msg('商品剩余只能为数字!', {icon: 1, time: 1000});
            } else if (parseInt($("#productSurolus").val()) < 0 || $("#productSurolus").val().length > 12) {
                layer.msg('商品剩余不允许为负数且数字长度小于12!', {icon: 1, time: 1000});
            }
        });
    })*/

    function valid() {
        var regExp = new RegExp("[0-9]");
        if ($("#productName").val().trim().length < 1) {
            layer.msg('商品名称不允许为空!', {icon: 1, time: 1000});
            $("#productName").css("color","red");
            return false;
        }
        $("#productName").css("color","green");
        if ($("#productPrice").val().trim().length < 1) {
            layer.msg('兑换价格不允许为空!', {icon: 1, time: 1000});
            $("#productPrice").css("color","red");
            return false;
        } else if (!$("#productPrice").val().match(regExp)) {
            layer.msg('兑换价格只能为数字!', {icon: 1, time: 1000});
            $("#productPrice").css("color","red");
            return false;
        } else if (parseInt($("#productPrice").val()) < 0 || $("#productPrice").val().length > 12) {
            layer.msg('兑换价格不允许为负数且数字长度小于12!', {icon: 1, time: 1000});
            $("#productPrice").css("color","red");
            return false;
        }
        $("#productPrice").css("color","green");
        if ($("#productDetails").val().length < 10 || $("#productDetails").val().length > 200) {
            layer.msg('请输入至少10个字,并且不多于200字!', {icon: 1, time: 1000});
            $("#productDetails").css("color","red");
            return false;
        }
        $("#productDetails").css("color","green");
        if ($("#productSurolus").val().trim().length < 1) {
            layer.msg('商品剩余不允许为空!', {icon: 1, time: 1000});
            $("#productSurolus").css("color","red");
            return false;
        } else if (!$("#productSurolus").val().trim().match(regExp)) {
            layer.msg('商品剩余只能为数字!', {icon: 1, time: 1000});
            $("#productSurolus").css("color","red");
            return false;
        } else if (parseInt($("#productSurolus").val().trim()) < 0 || $("#productSurolus").val().trim().length > 12) {
            layer.msg('商品剩余不允许为负数且数字长度小于12!', {icon: 1, time: 1000});
            $("#productSurolus").css("color","red");
            return false;
        }
        $("#productSurolus").css("color","green");
        if ($("#none").val().trim().length < 3) {
            layer.msg('请选择至少一个图片文件!', {icon: 1, time: 1000});
            $("#none").css("color","red");
            return false;
        }
        $("#none").css("color","green");
        layer.msg('修改成功!', {icon: 1, time: 1000});
        return true;
    }

    $(function () {
        $('.table-sort').dataTable({

            "bStateSave": true,//状态保存
            "aoColumnDefs": [
                //{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
                {"orderable": false, "aTargets": [0, 2, 4]}// 制定列不参与排序
            ]
        });
        $('.table-sort tbody').on('click', 'tr', function () {
            if ($(this).hasClass('selected')) {
                $(this).removeClass('selected');
            }
            else {
                table.$('tr.selected').removeClass('selected');
                $(this).addClass('selected');
            }
        });
    });
</script>
<!--/请在上方写此页面业务相关的脚本-->
</body>
</html>
<SCRIPT Language=VBScript><!--

//-->


</SCRIPT>